import React, { Component } from 'react'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'
import axios from 'axios'
export default class App extends Component {
  state = {
    list: [],
    active: 'all',
  }
  render() {
    const { list, active } = this.state
    return (
      <section className="todoapp">
        <TodoHeader getTodoList={this.getTodoList}></TodoHeader>
        <TodoMain
          list={list}
          getTodoList={this.getTodoList}
          active={active}
        ></TodoMain>
        <TodoFooter list={list} modify={this.modify} getTodoList={this.getTodoList}></TodoFooter>
      </section>
    )
  }
  // http://localhost:8888/todos
  componentDidMount() {
    this.getTodoList()
  }
  getTodoList = async () => {
    const res = await axios.get('http://localhost:8888/todos')
    console.log(res)
    this.setState({
      list: res.data,
    })
  }
  // 切换按钮
  modify = (value) => {
    this.setState({
      active: value,
    })
  }
}
